<template>
  <div class="w-10">
    <div class="w-10 input-ct">
      <div class="flex bk-c-w input-item">
        <div class="f-48 img-ct">
         手机号
        </div>
        <div>{{userInfo.mobile}}</div>
        <!-- <input
          v-model="memberPhone"
          class="f-39 phone-input"
          type="text"
          maxlength="11"
          ref="orderPhone"
          placeholder="手机号"
        > -->
      </div>
      <div class="flex bk-c-w input-item">
        <div class="f-48 img-ct">
          图形验证
        </div>

        <input
          v-model="imgValCode"
          class="f-39 phone-input"
          type="text"
          maxlength="11"
          ref="orderPhone"
          placeholder="图形验证"
        >
        <div class="val-btn-ct" @click="generateCode">
           <canvas id='auth-code' ref="valCode" class="auth-code"></canvas>
        </div>
      </div>
      <div class="flex bk-c-w input-item">
        <div class="f-48 img-ct">
          验证码
        </div>
        <input
          v-model="smsCode"
          class="f-39 phone-input"
          type="text"
          minlength="2"
          maxlength="6"
          ref="orderPhone"
          placeholder="请输入验证码"
        >
        <div class="val-btn-ct">
          <div class="login-btn val-btn">
            <captcha-button :phoneNum="memberPhone" :countDown="60" :imgValCode="imgValCode" :currentVal="currentVal"  @fGetCaptcha='fGetCaptcha'></captcha-button>
          </div>
        </div>
      </div>
          <div class="flex bk-c-w input-item">
        <div class="f-48 img-ct">
         新密码
        </div>
        <input
          v-model="pswd"
          class="f-39 phone-input"
          type="password"
          minlength="6"
          ref="orderPhone"
          placeholder="请输入新密码"
        >
      </div>
          <div class="flex bk-c-w input-item">
        <div class="f-48 img-ct">
         确认密码
        </div>
        <input
          v-model="newPswd"
          class="f-39 phone-input"
          type="password"
          minlength="6"
          ref="orderPhone"
          placeholder="请确认新密码"
        >
      </div>
    </div>

    <div class="w-10 login-ct">
      <div class="login-btn" @click="updateAccountPwd">保存</div>
    </div>
  </div>
</template>

<script>

// import md5 from 'js-md5'
import moment from 'moment'
import {MD5} from '@/utils/MD5'
import {imgValCode} from '@/utils/imgValCode'
import captchaButton from '@/components/common/captcha-button.vue'
import sowingMap from '@/components/common/sowingMap'
import { mixinParams } from '@/vmixin/vmixin'
import {updateAccountPwd, sendSmsValidCode} from '@/service'
export default {
  data () {
    return {
      selectedIndex: 1,
      smsCode: '', // 验证码
      pswd: '', // 密码
      ensurePwd: '', // 确认密码
      newPswd: '',
      imgValCode: '', // 图片验证码
      currentVal: '',
      memberPhone: ''
    }
  },
  created () {},
  mounted () {
    this.generateCode()
  },
  filters: {
    // moneyFilter(){
    //     return "33"
    // }
  },
  mixins: [mixinParams],
  components: {
    sowingMap,
    captchaButton
  },

  computed: {
    // 将获取的数据按照A-Z字母开头排序
    sortgroupcity () {
      let sortobj = {}
      return sortobj
    }
  },
  methods: {
    navToHello () {
      this.navTo('/hello')
    },
    // 切换tab
    changeTab (index) {
      this.selectedIndex = index || 1
      this.memberPhone = ''
    },
    generateCode () {
      let {valCode} = this.$refs
      let options = {
        canvasId: valCode,
        length: 4,
        width: 180,
        height: 40
      }
      this.currentVal = imgValCode(options)
      console.log('valCode========000000=======', this.imgValCode)
    },
    async sendSmsValidCode () {
      let {memberPhone, cdkey} = this
      let phoneVal = moment().format('MMDDYYYY') + memberPhone.substring(7) + (new Date().getDay() || 7)
      cdkey = MD5(phoneVal, 32)// .substring(0, 16)
      let oParams = {
        mobile: memberPhone, // 登录号码
        cdkey: cdkey
      }
      let sendValResult = await sendSmsValidCode(oParams)
      console.log('sendSmsValidCode--------=====111111-----', phoneVal, oParams, sendValResult)
    },
    /**
     * 用户登录
     */
    async updateAccountPwd () {
      let {memberPhone, pswd, newPswd, smsCode, imgValCode, currentVal} = this
      let oParams = {
        mobile: memberPhone, // 登录号码
        password: pswd,
        newPswd: newPswd, // 推荐人
        smsCode: smsCode // 短信验证码
      }
      // if (!/1\d{10}/.test(memberPhone)) {
      //   this.$vux.toast.show({
      //     text: '请输入正确手机号码',
      //     type: 'text'
      //   })
      //   return false
      // }

      imgValCode = imgValCode || ''
      if (imgValCode.toLocaleLowerCase() !== currentVal.toLocaleLowerCase()) {
        this.$vux.toast.show({
          text: '验证码错误',
          type: 'cancel'
        })
        return false
      }
      if (!smsCode) {
        this.$vux.toast.show({
          text: '请输入短信验证码',
          type: 'text'
        })
        return false
      }
      if (!pswd) {
        this.$vux.toast.show({
          text: '密码不能为空',
          type: 'text'
        })
        return false
      }
      if (!pswd) {
        this.$vux.toast.show({
          text: '密码长度必须大于六位',
          type: 'text'
        })
        return false
      }
      console.log('pswd !== newPswd============', pswd, newPswd)
      if (pswd !== newPswd) {
        this.$vux.toast.show({
          text: '两次输入密码不一致',
          type: 'text'
        })
        return false
      }

      let updateResult = await updateAccountPwd(oParams)
      if (updateResult.result !== 1) {
        this.$vux.toast.show({
          text: '修改失败',
          type: 'text'
        })
        return false
      }
      this.$vux.toast.show({
        text: '修改成功',
        type: 'text'
      })
      console.log('updateResult-------999999999999--------', updateResult)
    },
    fGetCaptcha (status) {
      if (!status) {
        return false
      }
      this.sendSmsValidCode()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.logo-ct {
  padding: cmSize(120);
  .logo-img {
    width: cmSize(360);
    height: cmSize(360);
  }
}
.input-ct {
  .input-item {
    align-items: center;
    height: cmSize(160);
    border-bottom: 1px solid #eeeeee;
  }
  .img-ct {
    flex: 0 0 cmSize(360);
    padding: 0 cmSize(60);
  }
  .val-btn {
    width: cmSize(340);
  }
  .input-img {
    width: cmSize(60);
    height: cmSize(60);
    vertical-align: middle;
    margin-right: cmSize(40);
  }
  // .val-btn-ct{
  //   width: cmSize(500);
  //   padding-right: cmSize(60);
  // }
  .auth-code{
    width: cmSize(360);
    height: cmSize(150);
  }
  .phone-input {
    width: cmSize(420);
  }
}
.login-ct {
  padding: cmSize(80) cmSize(40);
}
.login-btn {
  margin: 0 auto;
  height: cmSize(130);
  line-height: cmSize(130);
  color: #ffffff;
  text-align: center;
  font-size: cmSize(48);
  background: #67c169;
  width: 100%;
  border-radius: cmSize(20);
  padding: 0 cmSize(30);
}
.protel-ct{
  padding:0 cmSize(40);
}
</style>
